/*
* @Author: 李华
* @Date:   2020-04-27 22:56:31
* @Last Modified by:   李华
* @Last Modified time: 2020-05-09 23:10:58
*/
.main-bac {
 -webkit-perspective:1500; 
} /*设定透视距离*/ 
 #main{
   width:700px;   
 height:700px;   
 margin: 0 auto; 
  position:relative;  
 -webkit-transform-style:preserve-3d;  
 -webkit-transition:-webkit-transform 2s ease 0s;
 -webkit-transform:rotateY(0deg) rotateX(0deg);
 /*过渡时间*/  
}  /*基本样式*/ 
 .d1,.d2,.d3,.d4,.d5,.d6{   
position: absolute; 
   margin: 0;  
   padding: 0;   
   width: 700px; 
   height: 700px;    
   line-height: 100;
     } 

#main .d1 { 
 background-color:red;  
 -webkit-transform:translateZ(700px);  }
   /*将第一个元素Z轴向前移动100px，形成第一个面（正面）*/  
  #main .d2 {  
 background-color:orange;  
  -webkit-transform:rotateX(90deg) translateZ(700px);  } 
  /*将第一个元素Z轴向前移动100px，绕x轴旋转90度形成上面的面*/
  #main .d3{ 
  background-color:yellow;
   -webkit-transform:rotateX(-90deg) translateZ(700px);  } 
  /*将第一个元素Z轴向前移动100px，绕x轴旋转-90度形成下边的面*/
 #main .d4 {  
 background-color:green; 
  -webkit-transform:rotateY(90deg) translateZ(700px);  }  
  /*将第一个元素Z轴向前移动100px，绕y轴旋转90度形成右侧的面*/
 #main .d5 { 
 background-color:gray; 
  -webkit-transform:rotateY(-90deg) translateZ(700px); }
  /*将第一个元素Z轴向前移动100px，绕y轴旋转-90度形成左侧的面*/ 
#main .d6 {  
 background-color:blue; 
  -webkit-transform:rotateY(180deg) translateZ(700px);  }  
  /*将第一个元素Z轴向前移动100px，绕y轴旋转180度形成后面（背面）*/ 
  #main:hover {-webkit-transform:rotateY(0deg) rotateX(-00deg); }  
  /*鼠标移入时绕Y轴旋转180度，绕Z轴旋转180度*/
h1{
	width: 500px;
	height: 50px;
	margin: 0px auto;
  text-align: center;
}
h1>p{
  display: block;
  height: 30px;
  width: 50px;
  float: left;
  background: lime;

}
